<template>
  <div>
    <div class="wel__header">
      <div class="wel__info">
        <img :src="userInfo.avatar" alt="" class="wel__info-img" />
        <div class="wel__info-content">
          <div class="wel__info-title">
            {{ userInfo.nick_name }}
            {{ $t("wel.info") }}
          </div>
          <div class="wel__info-subtitle">
            {{ userInfo.user_id }}
          </div>
        </div>
        <!-- {{ $store.state.testbind }}
        <button type="button" @click="testChange">改变值</button> -->
      </div>
    </div>

    <!-- <basic-container>
      <avue-data-display :option="option"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option2"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option3"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option4"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option5"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option6"></avue-data-display>
    </basic-container> -->
    <!-- 
    <basic-container>
      <avue-data-display :option="option4"></avue-data-display>
    </basic-container>

    <basic-container>
      <avue-data-display :option="option5"></avue-data-display>
    </basic-container> -->
    <!-- <
    <basic-container>
      <div class="echartsmain1" id="echartsmain1"></div>
    </basic-container>

    <basic-container>
      <div class="echartsmain2" id="echartsmain2"></div>
    </basic-container> -->
    <!-- <basic-container>
      <div id="myChart" :style="{ width: '100%', height: '1000px' }"></div>
    </basic-container> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import request from "@/router/axios";
export default {
  name: "wel",
  data() {
    return {
      data: this.getRandomData(),
      option: {
        span: 6,
        data: [],
      },
      option2: {
        span: 6,
        data: [],
      },
      option3: {
        span: 6,
        data: [],
      },
      option4: {
        span: 6,
        data: [],
      },
      option5: {
        span: 6,
        data: [],
      },
      option6: {
        span: 6,
        data: [],
      },
      // option6: {
      //   span: 6,
      //   data: [],
      // },
    };
  },
  computed: {
    tuoption() {
      return {
        xAxis: {
          type: "category",
          data: this.data.map((item) => item.time),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.data.map((item) => item.value),
            type: "line",
          },
        ],
      };
    },
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.drawLine();
  },
  created() {
    // this.$router.push("/form/form");
    // setInterval(() => {
    //   this.data = this.getRandomData();
    // }, 1000);
    // request({
    //   url: "/api/server-base/admin/stats/user/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/stats/order/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option2.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/stats/goods/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option3.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/stats/user/total/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option4.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/stats/user/day/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option5.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/stats/user/now/count",
    //   method: "get",
    // }).then((data) => {
    //   this.option6.data = data.data.data;
    // });
    // // request({
    // //   url: "/api/server-base/admin/stats/goods/top",
    // //   method: "get",
    // // }).then((data) => {
    // //   this.option4.data = data.data.data;
    // // });
    // request({
    //   url: "/api/server-base/admin/stats/order/money/trend",
    //   method: "get",
    // }).then((data) => {
    //   // this.option5.data = data.data.data;
    //   this.drawLine(data.data.data);
    // });
    // request({
    //   url: "/api/server-base/admin/index/count/order/day/money",
    //   method: "get",
    // }).then((res) => {
    //   // console.log(data);
    //   let data = res.data.data;
    //   let time = [];
    //   let integral1 = [];
    //   // let integral2 = [];
    //   data.map((item) => {
    //     // item.money = 100;
    //     time.push(item.date.substring(5, 10));
    //     integral1.push(Number(item.money));
    //     // integral2.push(item.integral2);
    //   });
    //   time.reverse();
    //   integral1.reverse();
    //   // integral2.reverse();
    //   this.rendersCharts1(time, integral1);
    //   // this.option3.data = data.data.data;
    // });
    // request({
    //   url: "/api/server-base/admin/index/count/order/day/number",
    //   method: "get",
    // }).then((res) => {
    //   // console.log(data);
    //   let data = res.data.data;
    //   let time = [];
    //   let integral1 = [];
    //   // let integral2 = [];
    //   data.map((item) => {
    //     item.money = 100;
    //     time.push(item.date.substring(5, 10));
    //     integral1.push(Number(item.number));
    //     // integral2.push(item.integral2);
    //   });
    //   time.reverse();
    //   integral1.reverse();
    //   // integral2.reverse();
    //   this.rendersCharts2(time, integral1);
    //   // this.option3.data = data.data.data;
    // });
  },
  methods: {
    testChange() {
      console.log(this.$store.state.testbind);
      this.$store.state.testbind = "456";
    },
    drawLine(info) {
      // 基于准备好的dom，初始化echarts实例

      const myChart = echarts.init(document.getElementById("myChart"));
      let data = [];
      let data2 = [];
      info.map((item) => {
        data.push(item.date);
        data2.push(item.amount);
      });
      myChart.setOption({
        title: {
          text: "订单交易额趋势图",
        },
        //官网实例代码，如下图
        xAxis: {
          type: "category",
          data,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data2,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    getRandomData() {
      return [
        {
          time: "2022-9-11",
          value: Math.random() * 100,
        },
        {
          time: "2022-9-11",
          value: Math.random() * 100,
        },
        {
          time: "2022-9-11",
          value: Math.random() * 100,
        },
        {
          time: "2022-9-11",
          value: Math.random() * 100,
        },
      ];
    },
    rendersCharts1(time, integral1) {
      let myChart = echarts.init(document.getElementById("echartsmain1"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "ECharts 入门示例",
        // },
        // height: 200,
        width: 1200,
        tooltip: {},
        legend: {
          // type:'plain',
          width: "100%",
          left: 115,
          top: 20,
          icon: "rect",
          textStyle: {
            // color: "#fff",
          },
          data: [
            {
              name: "交易金额",
              itemStyle: {
                color: "#15A0FF",
                opacity: "1",
                icon: "rect",
              },
              lineStyle: {
                opacity: "0",
              },
            },
            // {
            //   name: "德育银行剩余积分",
            //   itemStyle: {
            //     color: "#FFC600",
            //   },
            //   lineStyle: {
            //     opacity: "0",
            //   },
            // },
          ],
        },
        xAxis: {
          axisTick: {
            // show: false,
          },
          axisLine: {
            // show: false,
          },
          axisLabel: {
            // inside: false,
            // color: "#fff",
          },
          // type: 'category',
          data: time,
        },
        yAxis: {
          type: "value",
          // minInterval: 0,
          // maxInterval: 10000,
          splitLine: {
            lineStyle: {
              // color: ["rgba(110,250,249,.2)"],
            },
          },
          axisLabel: {
            // inside: false,
            // color: "#fff",
          },
        },
        series: [
          {
            name: "交易金额",
            type: "line",
            data: integral1,
            // showSymbol: false,
            symbolSize: 4,
            lineStyle: {
              color: "#15A0FF",
            },
          },
          // {
          //   name: "德育银行剩余积分",
          //   type: "line",
          //   data: integral2,
          //   showSymbol: false,
          //   lineStyle: {
          //     color: "#FFC600",
          //   },
          // },
        ],
      });
    },
    rendersCharts2(time, integral1) {
      let myChart = echarts.init(document.getElementById("echartsmain2"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "ECharts 入门示例",
        // },
        // height: 200,
        width: 1200,
        tooltip: {},
        legend: {
          // type:'plain',
          width: "100%",
          left: 115,
          top: 20,
          icon: "rect",
          textStyle: {
            // color: "#fff",
          },
          data: [
            {
              name: "交易数量",
              itemStyle: {
                color: "#15A0FF",
                opacity: "1",
                icon: "rect",
              },
              lineStyle: {
                opacity: "0",
              },
            },
            // {
            //   name: "德育银行剩余积分",
            //   itemStyle: {
            //     color: "#FFC600",
            //   },
            //   lineStyle: {
            //     opacity: "0",
            //   },
            // },
          ],
        },
        xAxis: {
          axisTick: {
            // show: false,
          },
          axisLine: {
            // show: false,
          },
          axisLabel: {
            // inside: false,
            // color: "#fff",
          },
          // type: 'category',
          data: time,
        },
        yAxis: {
          type: "value",
          // minInterval: 0,
          // maxInterval: 10000,
          splitLine: {
            lineStyle: {
              // color: ["rgba(110,250,249,.2)"],
            },
          },
          axisLabel: {
            // inside: false,
            // color: "#fff",
          },
        },
        series: [
          {
            name: "交易数量",
            type: "line",
            data: integral1,
            // showSymbol: false,
            symbolSize: 4,
            lineStyle: {
              color: "#15A0FF",
            },
          },
          // {
          //   name: "德育银行剩余积分",
          //   type: "line",
          //   data: integral2,
          //   showSymbol: false,
          //   lineStyle: {
          //     color: "#FFC600",
          //   },
          // },
        ],
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__info {
    display: flex;
    align-items: center;
    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
    &-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
    &-subtitle {
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }
  &__extra {
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: "";
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}
.echartsmain1,
.echartsmain2 {
  margin-top: 20px;
  width: 1200;
  height: 600px;
}
</style>
